<template>
  <div>
    <div class="page-wrap">
      <div class="page-main">
        <div class="page-top-bg">
          <div class="page-logo"></div>
          <div class="page-time">{{ currentDate }}</div>
        </div>

        <div class="swiper-main">
          <div class="swiper-list">
            <el-carousel indicator-position="none" :interval="3000" :initial-index="0" arrow="never" :loop="true" class="swiper-list-2">
              <el-carousel-item :key="0" class="swiper-item">
                <page1 :type="2"></page1>
                <page2></page2>
                <page5></page5>
                <page6></page6>
              </el-carousel-item>
              <el-carousel-item :key="1" class="swiper-item">
                <page3></page3>
                <page4 :type="2"></page4>
                <page7></page7>
                <page8></page8>
              </el-carousel-item>
            </el-carousel>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import page1 from "./page1";
import page2 from "./page2";
import page3 from "./page3";
import page4 from "./page4";
import page5 from "./page5";
import page6 from "./page6";
import page7 from "./page7";
import page8 from "./page8";
export default {
  data() {
    return {
      page: [
        { path: "page1" },
        { path: "page2" },
        { path: "page3" },
        { path: "page4" },
        { path: "page5" },
        { path: "page6" },
        { path: "page7" },
        { path: "page8" },
      ],
      currentDate: this.$dayjs().format("YYYY年MM月DD日 HH:mm:ss"),
      mainMenu: [],
      intervalId: null,
    };
  },
  mounted() {
    this.intervalId = setInterval(() => {
      this.currentDate = this.$dayjs().format("YYYY年MM月DD日 HH:mm:ss");
    }, 1000);
  },
  destroyed() {
    clearInterval(this.intervalId);
  },
  methods: {
   
  },
  components: {
    page1,
    page2,
    page3,
    page4,
    page5,
    page6,
    page7,
    page8,
  },
};
</script>
<style lang="scss" scoped>
@import url(../assets/css/base.css);
.swiper-main {
  height: 2160rem;
  width: 3840rem;
  margin: 0 auto;
  
  .swiper-list {
    width: 3840rem;
    height: 2160rem;
    .swiper-item {
      width: 3840rem;
      height: 2160rem;
      float: left;
      display: flex;
      flex-wrap: wrap;
    }
  }
  .swiper-list-2{
    width: 3840rem;
    height: 2160rem;
  }
}

.page-wrap {
  width: 3840rem;
  height: 2160rem;
}
.page-main {
  width: 3840rem;
  height: 2160rem;
}


.page-top-bg {
  width: 3840rem;
  height: 180rem;
  background: url("../assets/images/top2@2x.png") no-repeat top center;
  background-size: 100% 100%;
  position: absolute;
  top: 0;
}

.page-logo {
  width: 3840rem;
  height: 123rem;
  background: url("../assets/images/logo2.png") no-repeat top center;
  background-size: 1040rem 100%;
  margin-top: 17rem;
}
.page-time {
  right: 270rem;
  top: 12rem;
}
</style>
